<template>
  <div>
    <div class="bilst">
      <!-- 左 -->
      <div class="list-bilst">
        <dl>
          <dt>
            <img src="../assets/images/109951166952713766.jpg" alt="" />
            <a title="飙升榜" href="javascript:;" class="list-bilst-a"></a>
            <a href="javascript:;" class="list-bilst-tit1">飙升榜</a>
            <a href="javascript:;" class="list-bilst-tit2">播放</a>
            <a href="javascript:;" class="list-bilst-tit3">收藏</a>
          </dt>
          <dd>
            <ul class="songList">
              <li>
                <span>1</span>
                <a href="javascript:;" title="爱你">爱你</a>
                <div class="li-hover">
                  <a href="javascript:;" class="songList-a1"></a>
                  <a href="javascript:;" class="songList-a2"></a>
                  <a href="javascript:;" class="songList-a3"></a>
                </div>
              </li>
            </ul>
          </dd>
        </dl>
      </div>
      <!-- 中 -->
      <div class="list-bilst"></div>
      <!-- 右 -->
      <div class="list-bilst"></div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.bilst {
  margin: 20px 20px 0 20px;
  height: 472px;
  padding-left: 1px;
  background: url("../assets/images/index_bill.png");
  background-repeat: no-repeat;
}

/* 左 */
.list-bilst {
  float: left;
  width: 230px;
}

.list-bilst dt {
  position: relative;
  padding: 20px 0 0 19px;
  height: 80px;
}

.list-bilst dt img {
  width: 80px;
  height: 80px;
}

.list-bilst-a {
  position: absolute;
  left: 19px;
  top: 20px;
  width: 80px;
  height: 80px;
  background-image: url("../assets/images/coverall.png");
  background-repeat: no-repeat;
  background-position: -145px -57px;
  z-index: 5;
}

.list-bilst-tit1 {
  position: absolute;
  top: 30px;
  right: 80px;
  font-weight: bold;
  color: #333;
  font-size: 14px;
  z-index: 5;
}

.list-bilst-tit2 {
  text-indent: -9999px;
  position: absolute;
  left: 108px;
  top: 53px;
  display: block;
  width: 22px;
  height: 22px;
  background-image: url("../assets/images/index.png");
  background-repeat: no-repeat;
  background-position: -267px -205px;
}

.list-bilst-tit3 {
  text-indent: -9999px;
  position: absolute;
  left: 140px;
  top: 53px;
  display: block;
  width: 22px;
  height: 22px;
  background-image: url("../assets/images/index.png");
  background-repeat: no-repeat;
  background-position: -300px -205px;
}

.list-bilst dd {
  margin-top: 21px;
}

.songList {
  height: 319px;
}

.songList li {
  position: relative;
  height: 32px;
  line-height: 32px;
}

.songList li span {
  color: #c10d0c;
  display: block;
  float: left;
  font-size: 16px;
  width: 35px;
  height: 32px;
  text-align: center;
}

.songList li a {
  width: 170px;
  height: 32px;
  color: #000;
  text-decoration: none;
  font-size: 12px;
  display: block;
  float: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}

.songList li div.li-hover {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 94px;
  height: 20px;
  display: none;
  margin: 3px 0 0 0;
}

.songList li:hover div.li-hover {
  display: block;
}

.songList li:hover a {
  width: 96px;
}

.songList li div.li-hover a.songList-a1 {
  float: left;
  width: 17px;
  height: 17px;
  margin-left: 12px;
  background-image: url("../assets/images/index.png");
  background-repeat: no-repeat;
  background-position: -267px -268px;
}

.songList li div.li-hover a.songList-a2 {
  float: left;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  margin-left: 10px;
  background-image: url("../assets/images/icon.png");
  background-repeat: no-repeat;
  background-position: 0 -700px;
}

.songList li div.li-hover a.songList-a3 {
  float: left;
  width: 17px;
  height: 17px;
  margin-left: 8px;
  background-image: url("../assets/images/index.png");
  background-repeat: no-repeat;
  background-position: -297px -268px;
}
</style>